<template>
  <view class="account-login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>

    <!-- 内容区域 -->
    <view class="content-wrapper">
      <!-- 返回按钮 -->
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>

      <!-- 标题 -->
      <view class="header-section">
        <text class="title">账号登录</text>
        <text class="subtitle">使用用户名或手机号登录</text>
      </view>

      <!-- 登录表单 -->
      <view class="login-form">
        <!-- 账号输入 -->
        <view class="input-wrapper">
          <text class="input-icon">👤</text>
          <input class="input-field" type="text" v-model="account" placeholder="请输入用户名或手机号"
            placeholder-class="input-placeholder" :focus="accountFocus" />
          <text v-if="account" class="clear-icon" @tap="clearAccount">✕</text>
        </view>

        <!-- 密码输入 -->
        <view class="input-wrapper">
          <text class="input-icon">🔒</text>
          <input class="input-field" :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="请输入密码"
            placeholder-class="input-placeholder" password />
          <text class="eye-icon" @tap="togglePassword">{{ showPassword ? '👁' : '👁‍🗨' }}</text>
        </view>

        <!-- 忘记密码 -->
        <view class="forgot-password">
          <text class="forgot-text" @tap="goToForgotPassword">忘记密码？</text>
        </view>

        <!-- 登录按钮 -->
        <button class="login-btn" :class="{ disabled: !canLogin }" :disabled="!canLogin" @tap="onLogin">
          <text class="login-btn-text">登录</text>
        </button>

        <!-- 其他登录方式 -->
        <view class="other-login">
          <view class="divider">
            <view class="divider-line"></view>
            <text class="divider-text">其他登录方式</text>
            <view class="divider-line"></view>
          </view>

          <view class="login-methods">
            <view class="method-item" @tap="goToPhoneLogin">
              <view class="method-icon">📱</view>
              <text class="method-text">验证码登录</text>
            </view>
          </view>
        </view>

        <!-- 注册提示 -->
        <view class="register-tip">
          <text class="tip-text">还没有账号？</text>
          <text class="register-link" @tap="goToRegister">立即注册</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { accountLogin } from '@/api/auth'
import { useUser } from '@/composables/useUser'

// 获取用户状态管理
const { setLoginInfo } = useUser()

// 表单数据
const account = ref('')
const password = ref('')
const showPassword = ref(false)
const accountFocus = ref(false)

// 是否可以登录
const canLogin = computed(() => {
  return account.value.length >= 3 && password.value.length >= 6
})

/**
 * 账号密码登录
 */
const onLogin = async () => {
  if (!canLogin.value) return

  try {
    // 调用后端登录接口
    const response = await accountLogin({
      account: account.value,
      password: password.value
    })
    // 保存用户信息和 Token
    setLoginInfo(response.user, response.accessToken, response.refreshToken)

    // 提示成功并跳转
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    })

    setTimeout(() => {
      uni.switchTab({
        url: '/pages/home/home'
      })
    }, 1500)

  } catch (error: any) {
    console.error('登录失败:', error)
    // 错误提示已在 request 中处理
  }
}

/**
 * 清除账号输入
 */
const clearAccount = () => {
  account.value = ''
  accountFocus.value = true
}

/**
 * 切换密码显示/隐藏
 */
const togglePassword = () => {
  showPassword.value = !showPassword.value
}

/**
 * 返回上一页
 */
const goBack = () => {
  uni.navigateBack()
}

/**
 * 跳转到忘记密码页面
 */
const goToForgotPassword = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

/**
 * 跳转到验证码登录页面
 */
const goToPhoneLogin = () => {
  uni.navigateBack()
}

/**
 * 跳转到注册页面
 */
const goToRegister = () => {
  uni.navigateTo({
    url: '/pages/register/register'
  })
}
</script>

<style scoped>
.account-login-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
  width: 400rpx;
  height: 400rpx;
  top: -100rpx;
  right: -100rpx;
}

.circle-2 {
  width: 300rpx;
  height: 300rpx;
  bottom: 100rpx;
  left: -50rpx;
}

.circle-3 {
  width: 200rpx;
  height: 200rpx;
  top: 50%;
  right: 50rpx;
}

/* 内容区域 */
.content-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 0 60rpx;
  padding-top: 100rpx;
}

/* 返回按钮 */
.back-btn {
  position: absolute;
  top: 40rpx;
  left: 40rpx;
  width: 72rpx;
  height: 72rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
}

.back-icon {
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
}

/* 头部 */
.header-section {
  margin-bottom: 80rpx;
}

.title {
  display: block;
  font-size: 64rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 16rpx;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
}

/* 登录表单 */
.login-form {
  background: #fff;
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.15);
}

/* 输入框 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 96rpx;
  background: #f5f5f5;
  border-radius: 16rpx;
  padding: 0 24rpx;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.input-icon {
  font-size: 36rpx;
  flex-shrink: 0;
}

.input-field {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.input-placeholder {
  color: #999;
}

.clear-icon,
.eye-icon {
  font-size: 32rpx;
  color: #999;
  flex-shrink: 0;
  padding: 10rpx;
}

/* 忘记密码 */
.forgot-password {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 40rpx;
}

.forgot-text {
  font-size: 24rpx;
  color: #4A90E2;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 48rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

.login-btn::after {
  border: none;
}

.login-btn.disabled {
  opacity: 0.5;
}

.login-btn-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #fff;
}

/* 其他登录方式 */
.other-login {
  margin-bottom: 32rpx;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
}

.divider-line {
  flex: 1;
  height: 1rpx;
  background-color: #e5e5e5;
}

.divider-text {
  font-size: 24rpx;
  color: #999;
  padding: 0 20rpx;
}

.login-methods {
  display: flex;
  justify-content: center;
  gap: 40rpx;
}

.method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.method-icon {
  width: 96rpx;
  height: 96rpx;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
}

.method-text {
  font-size: 24rpx;
  color: #666;
}

/* 注册提示 */
.register-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #666;
}

.register-link {
  font-size: 24rpx;
  color: #4A90E2;
  font-weight: 500;
}
</style>
